<template>
	<div>
		<div class="headerbox">
			<div class="header">
				<div class="headerL">
					<router-link
						to="/business"
						class="goback"
						><img src="/assets/images/goback.png"
					/></router-link>
				</div>
				<div class="headerC">
					<p>修改个人资料</p>
				</div>
				<div class="headerR"></div>
			</div>
		</div>
		<van-form id="form">
			<van-cell-group inset>
				<van-field
					v-model="email"
					label="邮箱"
					disabled />
			</van-cell-group>
			<van-cell-group inset>
				<van-field
					v-model="code"
					center
					clearable
					label="邮箱验证码"
					placeholder="请输入邮箱验证码">
					<template #button>
						<van-button
							@click="send"
							size="small"
							type="primary"
							:disabled="dis">
							{{ msg }}
							<van-count-down
								class="hhhhhh"
								v-show="isShow"
								ref="countDown"
								:time="time"
								:auto-start="false"
								format="mm:ss"
								@finish="onFinish" />
						</van-button>
					</template>
				</van-field>
			</van-cell-group>
			<div style="margin: 16px">
				<van-button
					@click="onSubmit"
					round
					block
					type="primary">
					点击验证
				</van-button>
			</div>
		</van-form>

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import { showFailToast, showSuccessToast, showToast } from "vant";
	export default {
		data() {
			return {
				// 验证码
				code: "",
				// 按钮的提示消息
				msg: "发送验证码",
				// 控制倒计时的显示
				isShow: false,
				// 倒计时
				time: 120000,
				// time: 10000,
				// 点击后禁用按钮
				dis: false,
				email: this.$cookies.get("User").email,
				isLoading: false,
			};
		},
		methods: {
			async onSubmit() {
				this.isLoading = true;
				let res = await this.$api.CodeVerify({
					email: this.email,
					code: this.code,
					id: this.$cookies.get("User").id,
				});
				
				
				if (res.code == 1) {
					showSuccessToast({
						message: res.msg,
					});
					this.$router.push("/business");
				} else {
					showFailToast({ message: res.msg });
				}
				this.isLoading = false;
			},
			async send() {
				// 禁用按钮
				this.dis = true;
				// 打开计时显示
				this.isShow = true;
				// 开启计时
				this.$refs.countDown.start();
				// 把消息设为空
				this.msg = "";
				this.isLoading = true;
				let res = await this.$api.SendEmailCode({ email: this.email });

				// 响应拦截器拦截或返回错误重新调用刷新计时函数
				if (res.code != 1) {
					this.onFinish();
					showFailToast({
						message: res.msg,
					});
				}
				this.isLoading = false;
			},
			//  刷新计时函数
			onFinish() {
				// 解除禁用
				this.dis = false;
				// 重置计时
				this.$refs.countDown.reset();
				this.isShow = false;
				this.msg = "再次发送";
			},
		},
	};
</script>

<style scoped>
	.headerL {
		width: 40px;
		height: 100% !important;
	}

	.headerL > a {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
	}

	.headerL > a > img {
		width: 60%;
		height: 60% !important;
		padding-top: 0 !important;
	}

	.headerC {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ChangeForm {
		padding: 0 10px;
	}

	#form {
		padding-top: 60px;
	}
</style>
